<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layouts/header :: head('配置管理 - 监控工具平台')">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配置管理 - 监控工具平台</title>
    <link rel="stylesheet" href="/monitoring/css/element-ui.css">
    <link rel="stylesheet" href="/monitoring/css/custom.css">
</head>
<body>
    <!-- 使用公共头部 -->
    <div th:replace="layouts/header :: header"></div>

    <div id="app" class="container">
        <h1>配置管理</h1>
        
        <el-alert
            title="配置信息提示"
            type="info"
            :closable="false"
            show-icon>
            <span>所有配置信息保存在外部配置文件中: <strong th:text="${configFilePath}">./config/monitoring-config.json</strong></span>
        </el-alert>
        
        <el-tabs v-model="activeTab" type="border-card" class="mt-20">
            <!-- 核心服务配置 -->
            <el-tab-pane label="核心服务配置" name="core">
                <el-button type="primary" size="small" @click="addTargetServiceDialog = true">添加核心服务</el-button>
                
                <el-table :data="config.targetService" style="width: 100%; margin-top: 20px" border>
                    <el-table-column prop="name" label="名称" width="180"></el-table-column>
                    <el-table-column prop="url" label="服务地址" width="250"></el-table-column>
                    <el-table-column prop="method" label="请求方法" width="100"></el-table-column>
                    <el-table-column prop="expectedRespCode" label="期望响应码" width="120"></el-table-column>
                    <el-table-column prop="checkInterval" label="检查间隔(ms)" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.checkInterval }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="editTargetService(scope.row, scope.$index)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="deleteTargetService(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <!-- 添加/编辑目标服务对话框 -->
                <el-dialog :title="isEditingTargetService ? '编辑核心服务' : '添加核心服务'" :visible.sync="addTargetServiceDialog" width="50%">
                    <el-form :model="newTargetService" label-width="120px" size="small">
                        <el-form-item label="服务名称" required>
                            <el-input v-model="newTargetService.name" placeholder="请输入服务名称"></el-input>
                        </el-form-item>
                        <el-form-item label="服务地址" required>
                            <el-input v-model="newTargetService.url" placeholder="请输入服务URL"></el-input>
                        </el-form-item>
                        <el-form-item label="请求方法">
                            <el-select v-model="newTargetService.method" placeholder="请选择请求方法">
                                <el-option label="GET" value="GET"></el-option>
                                <el-option label="POST" value="POST"></el-option>
                                <el-option label="PUT" value="PUT"></el-option>
                                <el-option label="DELETE" value="DELETE"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="期望响应代码">
                            <el-input v-model.number="newTargetService.expectedRespCode" placeholder="请输入期望的响应代码"></el-input>
                        </el-form-item>
                        <el-form-item label="检查间隔(ms)">
                            <el-input v-model.number="newTargetService.checkInterval" placeholder="请输入检查间隔(毫秒)"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="addTargetServiceDialog = false">取消</el-button>
                        <el-button type="primary" @click="saveTargetService">确定</el-button>
                    </span>
                </el-dialog>
            </el-tab-pane>

            <!-- 网络监控配置 -->
            <el-tab-pane label="网络监控配置" name="network">
                <div style="margin-bottom: 20px;">
                    <el-button type="primary" size="small" @click="addNetworkGroupDialog = true">添加服务分组</el-button>
                    <el-button type="success" size="small" @click="openAddNetworkServiceDialog">添加网络监控</el-button>
                </div>
                
                <!-- 分组显示 -->
                <div v-if="config.networkCheck.groups && config.networkCheck.groups.length > 0">
                    <el-collapse v-model="activeNetworkGroups" accordion>
                        <el-collapse-item v-for="(group, groupIndex) in config.networkCheck.groups" 
                                        :key="groupIndex" 
                                        :title="group.name + ' (' + (group.services ? group.services.length : 0) + '个服务)'" 
                                        :name="groupIndex.toString()">
                            <template slot="title">
                                <div style="display: flex; align-items: center; width: 100%;">
                                    <el-tag :type="getCategoryTagType(group.category)" size="mini" style="margin-right: 10px;">
                                        {{ getCategoryText(group.category) }}
                                    </el-tag>
                                    <span>{{ group.name }}</span>
                                    <span style="color: #909399; margin-left: 10px;">({{ group.services ? group.services.length : 0 }}个服务)</span>
                                    <div style="margin-left: auto; margin-right: 20px;">
                                        <el-button size="mini" type="primary" @click.stop="editNetworkGroup(group, groupIndex)">编辑分组</el-button>
                                        <el-button size="mini" type="danger" @click.stop="deleteNetworkGroup(groupIndex)">删除分组</el-button>
                                    </div>
                                </div>
                            </template>
                            
                            <div style="margin-bottom: 10px; color: #606266;">
                                {{ group.description }}
                            </div>
                            
                            <el-table :data="group.services" style="width: 100%" border size="small">
                                <el-table-column prop="name" label="名称" width="150"></el-table-column>
                                <el-table-column prop="host" label="主机/域名" width="180">
                                    <template slot-scope="scope">
                                        <div>
                                            {{ scope.row.host }}
                                            <el-tag v-if="scope.row.isDomain" type="info" size="mini" style="margin-left: 5px;">域名</el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="port" label="端口" width="80">
                                    <template slot-scope="scope">
                                        {{ scope.row.port || '无' }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="type" label="类型" width="80"></el-table-column>
                                <el-table-column prop="connectionType" label="连接方式" width="100">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.connectionType === 'direct' ? 'success' : 'warning'" size="mini">
                                            {{ scope.row.connectionType === 'direct' ? '直连' : '间连' }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="label" label="标签" width="120"></el-table-column>
                                <el-table-column prop="description" label="描述" width="150" show-overflow-tooltip></el-table-column>
                                <el-table-column label="操作" width="150">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="primary" @click="editNetworkService(scope.row, scope.$index, groupIndex)">编辑</el-button>
                                        <el-button size="mini" type="danger" @click="deleteNetworkService(scope.$index, groupIndex)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                
                <!-- 传统配置兼容显示 -->
                <div v-if="config.networkCheck.services && config.networkCheck.services.length > 0">
                    <h4>传统配置（建议迁移到分组管理）</h4>
                    <el-table :data="config.networkCheck.services" style="width: 100%; margin-top: 20px" border>
                        <el-table-column prop="name" label="名称" width="180"></el-table-column>
                        <el-table-column prop="host" label="主机" width="150"></el-table-column>
                        <el-table-column prop="port" label="端口" width="80">
                            <template slot-scope="scope">
                                {{ scope.row.port || '无 (仅Ping)' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="类型" width="100"></el-table-column>
                        <el-table-column prop="connectionType" label="连接方式" width="120">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.connectionType === 'direct' ? 'success' : 'warning'">
                                    {{ scope.row.connectionType === 'direct' ? '直连' : '间连' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="label" label="标签" width="150"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="editLegacyNetworkService(scope.row, scope.$index)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="deleteLegacyNetworkService(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                
                <!-- 添加/编辑分组对话框 -->
                <el-dialog :title="isEditingNetworkGroup ? '编辑服务分组' : '添加服务分组'" :visible.sync="addNetworkGroupDialog" width="50%">
                    <el-form :model="newNetworkGroup" label-width="120px" size="small">
                        <el-form-item label="分组名称" required>
                            <el-input v-model="newNetworkGroup.name" placeholder="请输入分组名称"></el-input>
                        </el-form-item>
                        <el-form-item label="分组类别" required>
                            <el-select v-model="newNetworkGroup.category" placeholder="请选择分组类别" allow-create filterable>
                                <el-option label="内网服务" value="internal"></el-option>
                                <el-option label="外网服务" value="external"></el-option>
                                <el-option label="第三方服务" value="thirdparty"></el-option>
                                <el-option label="数据库服务" value="database"></el-option>
                                <el-option label="缓存服务" value="cache"></el-option>
                                <el-option label="消息队列" value="mq"></el-option>
                                <el-option label="文件存储" value="storage"></el-option>
                                <el-option label="监控服务" value="monitoring"></el-option>
                                <el-option label="API网关" value="gateway"></el-option>
                                <el-option label="微服务" value="microservice"></el-option>
                            </el-select>
                            <div class="el-form-item-desc">可以选择预设类别或输入自定义类别名称</div>
                        </el-form-item>
                        <el-form-item label="分组描述">
                            <el-input v-model="newNetworkGroup.description" type="textarea" placeholder="请输入分组描述"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="addNetworkGroupDialog = false">取消</el-button>
                        <el-button type="primary" @click="saveNetworkGroup">确定</el-button>
                    </span>
                </el-dialog>
                
                <!-- 添加/编辑网络服务对话框 -->
                <el-dialog :title="isEditingNetworkService ? '编辑网络监控' : '添加网络监控'" :visible.sync="addNetworkServiceDialog" width="60%">
                    <el-form :model="newNetworkService" label-width="120px" size="small">
                        <el-form-item label="所属分组" required v-if="config.networkCheck.groups && config.networkCheck.groups.length > 0">
                            <el-select v-model="newNetworkService.groupIndex" placeholder="请选择所属分组">
                                <el-option v-for="(group, index) in config.networkCheck.groups" 
                                         :key="index" 
                                         :label="group.name + ' (' + getCategoryText(group.category) + ')'" 
                                         :value="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="服务名称" required>
                            <el-input v-model="newNetworkService.name" placeholder="请输入监控名称"></el-input>
                        </el-form-item>
                        <el-form-item label="主机/域名" required>
                            <el-input v-model="newNetworkService.host" placeholder="请输入主机地址、IP或域名">
                                <template slot="append">
                                    <el-checkbox v-model="newNetworkService.isDomain">域名</el-checkbox>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="端口">
                            <el-input v-model.number="newNetworkService.port" placeholder="端口号(可选)"></el-input>
                            <div class="el-form-item-desc">如果只需要Ping检测，可以不填写端口</div>
                        </el-form-item>
                        <el-form-item label="服务类型">
                            <el-select v-model="newNetworkService.type" placeholder="请选择服务类型">
                                <el-option label="HTTP" value="HTTP"></el-option>
                                <el-option label="HTTPS" value="HTTPS"></el-option>
                                <el-option label="TCP" value="TCP"></el-option>
                                <el-option label="MySQL" value="MySQL"></el-option>
                                <el-option label="Redis" value="Redis"></el-option>
                                <el-option label="MongoDB" value="MongoDB"></el-option>
                                <el-option label="Ping Only" value="PING"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="连接方式">
                            <el-radio-group v-model="newNetworkService.connectionType">
                                <el-radio label="direct">直连</el-radio>
                                <el-radio label="indirect">间连(网闸等)</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="服务标签">
                            <el-input v-model="newNetworkService.label" placeholder="如：生产环境、内网服务器等"></el-input>
                        </el-form-item>
                        <el-form-item label="服务描述">
                            <el-input v-model="newNetworkService.description" type="textarea" placeholder="请输入服务描述"></el-input>
                        </el-form-item>
                        <el-form-item label="DNS超时时间" v-if="newNetworkService.isDomain">
                            <el-input v-model.number="newNetworkService.dnsTimeout" placeholder="毫秒，默认5000">
                                <template slot="append">毫秒</template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="addNetworkServiceDialog = false">取消</el-button>
                        <el-button type="primary" @click="saveNetworkService">确定</el-button>
                    </span>
                </el-dialog>
            </el-tab-pane>

            <!-- 中间件配置 -->
            <el-tab-pane label="中间件配置" name="middleware">
                <el-collapse accordion>
                    <!-- JVM配置 -->
                    <el-collapse-item title="JVM监控配置" name="jvm">
                        <el-form :model="config.middleware.jvm" label-width="120px" size="small">
                            <el-form-item label="是否启用">
                                <el-switch v-model="config.middleware.jvm.enabled"></el-switch>
                            </el-form-item>
                            <el-form-item label="JMX URL">
                                <el-input v-model="config.middleware.jvm.url" placeholder="例：service:jmx:rmi:///jndi/rmi://localhost:9999/jmxrmi"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="用户名">
                                <el-input v-model="config.middleware.jvm.username" placeholder="JMX用户名"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input v-model="config.middleware.jvm.password" type="password" placeholder="JMX密码"></el-input>
                            </el-form-item> -->
                            <el-form-item>
                                <el-button type="primary" @click="saveJvmConfig">保存配置</el-button>
                            </el-form-item>
                            
                            <el-alert
                                title="JMX配置指南"
                                type="info"
                                :closable="false"
                                show-icon>
                                <div>
                                    <p><strong>如何开启目标Java应用的JMX远程连接：</strong></p>
                                    <p>在目标Java应用启动时添加以下JVM参数：</p>
                                    <pre style="background-color: #f5f5f5; padding: 10px; border-radius: 5px; overflow-x: auto;">
-Dcom.sun.management.jmxremote
-Dcom.sun.management.jmxremote.port=9999
-Dcom.sun.management.jmxremote.authenticate=false
-Dcom.sun.management.jmxremote.ssl=false
-Djava.rmi.server.hostname=localhost</pre>
                                    <p><strong>注意事项：</strong></p>
                                    <ul>
                                        <li>将端口号9999替换为您希望使用的端口</li>
                                        <li>生产环境建议启用认证和SSL</li>
                                        <li>将hostname设置为实际服务器IP或域名</li>
                                        <li>JMX URL格式: service:jmx:rmi:///jndi/rmi://[hostname]:[port]/jmxrmi</li>
                                    </ul>
                                    <el-button type="text" @click="showJmxParamsDialog = true">
                                        <i class="el-icon-magic-stick"></i> 生成JMX启动参数
                                    </el-button>
                                </div>
                            </el-alert>
                        </el-form>
                    </el-collapse-item>
                    
                    <!-- Redis配置 -->
                    <el-collapse-item title="Redis监控配置" name="redis">
                        <el-form :model="config.middleware.redis" label-width="120px" size="small">
                            <el-form-item label="是否启用">
                                <el-switch v-model="config.middleware.redis.enabled"></el-switch>
                            </el-form-item>
                            <el-form-item label="主机">
                                <el-input v-model="config.middleware.redis.host" placeholder="Redis主机"></el-input>
                            </el-form-item>
                            <el-form-item label="端口">
                                <el-input v-model.number="config.middleware.redis.port" placeholder="Redis端口"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input v-model="config.middleware.redis.password" type="password" placeholder="Redis密码(可选)"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="saveRedisConfig">保存配置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-collapse-item>
                    
                    <!-- Elasticsearch配置 -->
                    <el-collapse-item title="Elasticsearch监控配置" name="elasticsearch">
                        <el-form :model="config.middleware.elasticsearch" label-width="120px" size="small">
                            <el-form-item label="是否启用">
                                <el-switch v-model="config.middleware.elasticsearch.enabled"></el-switch>
                            </el-form-item>
                            <el-form-item label="主机列表">
                                <el-input v-model="config.middleware.elasticsearch.hosts" placeholder="例：localhost:9200,localhost:9201"></el-input>
                            </el-form-item>
                            <el-form-item label="用户名">
                                <el-input v-model="config.middleware.elasticsearch.username" placeholder="ES用户名(可选)"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input v-model="config.middleware.elasticsearch.password" type="password" placeholder="ES密码(可选)"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="saveElasticsearchConfig">保存配置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-collapse-item>
                    
                    <!-- MySQL配置 -->
                    <el-collapse-item title="MySQL监控配置" name="mysql">
                        <el-form :model="config.middleware.mysql" label-width="120px" size="small">
                            <el-form-item label="是否启用">
                                <el-switch v-model="config.middleware.mysql.enabled"></el-switch>
                            </el-form-item>
                            <el-form-item label="连接URL">
                                <el-input v-model="config.middleware.mysql.url" placeholder="例：jdbc:mysql://localhost:3306/db_name"></el-input>
                            </el-form-item>
                            <el-form-item label="用户名">
                                <el-input v-model="config.middleware.mysql.username" placeholder="MySQL用户名"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input v-model="config.middleware.mysql.password" type="password" placeholder="MySQL密码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="saveMySQLConfig">保存配置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-collapse-item>
                    
                    <!-- MinIO配置 -->
                    <el-collapse-item title="MinIO监控配置" name="minio">
                        <el-form :model="config.middleware.minio" label-width="120px" size="small">
                            <el-form-item label="是否启用">
                                <el-switch v-model="config.middleware.minio.enabled"></el-switch>
                            </el-form-item>
                            <el-form-item label="Endpoint">
                                <el-input v-model="config.middleware.minio.endpoint" placeholder="例：http://localhost:9000"></el-input>
                            </el-form-item>
                            <el-form-item label="账号">
                                <el-input v-model="config.middleware.minio.accessKey" placeholder="MinIO 账号"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input v-model="config.middleware.minio.secretKey" type="password" placeholder="MinIO 密码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="saveMinIOConfig">保存配置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-collapse-item>
                </el-collapse>
            </el-tab-pane>
        </el-tabs>
    </div>

    <script src="/monitoring/js/vue.min.js"></script>
    <script src="/monitoring/js/element-ui.js"></script>
    <script src="/monitoring/js/axios.min.js"></script>
    <script src="/monitoring/js/request.js"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/
        // 从Thymeleaf获取配置文件路径
        var configFilePath = /*[[${configFilePath}]]*/ './config/monitoring-config.json';
        /*]]>*/
        
        new Vue({
            el: '#app',
            data() {
                return {
                    configFilePath: configFilePath,
                    activeTab: 'core',
                    config: {
                        targetService: [],
                        networkCheck: {
                            services: [],
                            groups: []
                        },
                        middleware: {
                            jvm: {
                                enabled: false,
                                url: '',
                                username: '',
                                password: ''
                            },
                            redis: {
                                enabled: false,
                                host: '',
                                port: null,
                                password: ''
                            },
                            elasticsearch: {
                                enabled: false,
                                hosts: '',
                                username: '',
                                password: ''
                            },
                            mysql: {
                                enabled: false,
                                url: '',
                                username: '',
                                password: ''
                            },
                            minio: {
                                enabled: false,
                                endpoint: '',
                                accessKey: '',
                                secretKey: ''
                            }
                        }
                    },
                    addTargetServiceDialog: false,
                    isEditingTargetService: false,
                    editingTargetServiceIndex: -1,
                    newTargetService: {
                        name: '',
                        url: '',
                        method: 'GET',
                        expectedRespCode: 200,
                        checkInterval: 60000
                    },
                    addNetworkServiceDialog: false,
                    isEditingNetworkService: false,
                    editingNetworkServiceIndex: -1,
                    newNetworkService: {
                        name: '',
                        host: '',
                        port: null,
                        type: 'HTTP',
                        connectionType: 'direct',
                        label: '',
                        groupIndex: null,
                        isDomain: false,
                        dnsTimeout: 5000,
                        description: ''
                    },
                    showJmxParamsDialog: false,
                    jmxParams: {
                        hostname: '',
                        port: 9999,
                        authenticate: false,
                        ssl: false
                    },
                    activeNetworkGroups: [],
                    addNetworkGroupDialog: false,
                    isEditingNetworkGroup: false,
                    editingNetworkGroupIndex: -1,
                    newNetworkGroup: {
                        name: '',
                        category: 'internal',
                        description: ''
                    }
                };
            },
            created() {
                this.loadConfig();
            },
            methods: {
                loadConfig() {
                    request.get('/config/api/current').then(response => {
                        if (response.data) {
                            this.config = response.data;
                        }
                    }).catch(error => {
                        this.$message.error('加载配置信息失败');
                        console.error(error);
                    });
                },
                editTargetService(service, index) {
                    this.isEditingTargetService = true;
                    this.editingTargetServiceIndex = index;
                    this.newTargetService = JSON.parse(JSON.stringify(service)); // 深拷贝，避免直接修改原对象
                    this.addTargetServiceDialog = true;
                },
                saveTargetService() {
                    // 验证必填字段
                    if (!this.newTargetService.name || !this.newTargetService.url) {
                        this.$message.warning('请填写服务名称和URL');
                        return;
                    }
                    
                    request.post('/config/api/target-service', this.newTargetService).then(response => {
                        // 如果是编辑，则替换原有服务
                        if (this.isEditingTargetService) {
                            this.config.targetService[this.editingTargetServiceIndex] = response.data;
                            this.isEditingTargetService = false;
                            this.editingTargetServiceIndex = -1;
                            this.$message.success('核心服务更新成功');
                        } else {
                            // 如果是新增，则添加到列表
                            this.config.targetService.push(response.data);
                            this.$message.success('核心服务添加成功');
                        }
                        
                        this.addTargetServiceDialog = false;
                        
                        // 重置表单
                        this.newTargetService = {
                            name: '',
                            url: '',
                            method: 'GET',
                            expectedRespCode: 200,
                            checkInterval: 60000
                        };
                        
                        // 重新加载配置
                        this.loadConfig();
                    }).catch(error => {
                        this.$message.error('保存核心服务配置失败');
                        console.error(error);
                    });
                },
                deleteTargetService(index) {
                    this.$confirm('确定要删除此核心服务配置吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        request.delete(`/config/api/target-service/${index}`).then(() => {
                            this.config.targetService.splice(index, 1);
                            this.$message.success('删除成功');
                            // 重新加载配置
                            this.loadConfig();
                        }).catch(error => {
                            this.$message.error('删除失败');
                            console.error(error);
                        });
                    }).catch(() => {
                        // 取消删除操作
                    });
                },
                editNetworkService(service, index, groupIndex) {
                    console.log('=== 开始编辑网络服务 ===');
                    console.log('原始服务数据:', service);
                    console.log('服务索引:', index);
                    console.log('分组索引:', groupIndex);
                    
                    this.isEditingNetworkService = true;
                    this.editingNetworkServiceIndex = index;
                    this.newNetworkService = JSON.parse(JSON.stringify(service)); // 深拷贝，避免直接修改原对象
                    this.newNetworkService.groupIndex = groupIndex;
                    
                    console.log('设置编辑状态 - isEditingNetworkService:', this.isEditingNetworkService);
                    console.log('设置编辑索引 - editingNetworkServiceIndex:', this.editingNetworkServiceIndex);
                    console.log('设置分组索引 - newNetworkService.groupIndex:', this.newNetworkService.groupIndex);
                    console.log('复制的服务数据:', this.newNetworkService);
                    
                    this.addNetworkServiceDialog = true;
                },
                saveNetworkService() {
                    // 验证必填字段
                    if (!this.newNetworkService.name || !this.newNetworkService.host) {
                        this.$message.warning('请填写名称和主机地址');
                        return;
                    }
                    
                    // 对于新增操作，如果有分组，验证分组选择
                    if (!this.isEditingNetworkService && 
                        this.config.networkCheck.groups && this.config.networkCheck.groups.length > 0 && 
                        (this.newNetworkService.groupIndex === null || this.newNetworkService.groupIndex === undefined)) {
                        this.$message.warning('请选择所属分组');
                        return;
                    }
                    
                    // 设置默认值
                    if (this.newNetworkService.isDomain && !this.newNetworkService.dnsTimeout) {
                        this.newNetworkService.dnsTimeout = 5000;
                    }
                    
                    console.log('编辑状态:', this.isEditingNetworkService);
                    console.log('编辑索引:', this.editingNetworkServiceIndex);
                    console.log('分组索引:', this.newNetworkService.groupIndex);
                    
                    if (this.isEditingNetworkService) {
                        // 编辑模式：使用PUT接口
                        const serviceData = {
                            name: this.newNetworkService.name,
                            host: this.newNetworkService.host,
                            port: this.newNetworkService.port,
                            type: this.newNetworkService.type,
                            connectionType: this.newNetworkService.connectionType,
                            label: this.newNetworkService.label,
                            isDomain: this.newNetworkService.isDomain,
                            dnsTimeout: this.newNetworkService.dnsTimeout,
                            description: this.newNetworkService.description
                        };
                        
                        const groupIdx = this.newNetworkService.groupIndex !== null ? this.newNetworkService.groupIndex : -1;
                        const url = `/config/api/network-service/${groupIdx}/${this.editingNetworkServiceIndex}`;
                        
                        console.log('编辑请求URL:', url);
                        console.log('编辑服务数据:', serviceData);
                        
                        request.put(url, serviceData).then(response => {
                            console.log('编辑响应:', response);
                            
                            // 直接更新前端数据
                            if (this.newNetworkService.groupIndex !== null && this.newNetworkService.groupIndex !== undefined) {
                                // 分组模式下的编辑
                                this.$set(this.config.networkCheck.groups[this.newNetworkService.groupIndex].services, this.editingNetworkServiceIndex, response.data);
                            } else {
                                // 传统模式下的编辑
                                this.$set(this.config.networkCheck.services, this.editingNetworkServiceIndex, response.data);
                            }
                            
                            this.$message.success('网络服务更新成功');
                            this.addNetworkServiceDialog = false;
                            this.resetNetworkServiceForm();
                            
                        }).catch(error => {
                            this.$message.error('更新网络服务配置失败');
                            console.error('编辑失败:', error);
                        });
                        
                    } else {
                        // 新增模式：使用POST接口
                        const requestData = {
                            service: {
                                name: this.newNetworkService.name,
                                host: this.newNetworkService.host,
                                port: this.newNetworkService.port,
                                type: this.newNetworkService.type,
                                connectionType: this.newNetworkService.connectionType,
                                label: this.newNetworkService.label,
                                isDomain: this.newNetworkService.isDomain,
                                dnsTimeout: this.newNetworkService.dnsTimeout,
                                description: this.newNetworkService.description
                            },
                            groupIndex: this.newNetworkService.groupIndex,
                            isEditing: false,
                            editingServiceIndex: null
                        };
                        
                        console.log('新增请求数据:', requestData);
                        
                        request.post('/config/api/network-service', requestData).then(response => {
                            console.log('新增响应:', response);
                            
                            // 添加到对应位置
                            if (this.newNetworkService.groupIndex !== null && this.newNetworkService.groupIndex !== undefined) {
                                // 添加到指定分组
                                if (!this.config.networkCheck.groups[this.newNetworkService.groupIndex].services) {
                                    this.$set(this.config.networkCheck.groups[this.newNetworkService.groupIndex], 'services', []);
                                }
                                this.config.networkCheck.groups[this.newNetworkService.groupIndex].services.push(response.data);
                            } else {
                                // 添加到传统列表
                                if (!this.config.networkCheck.services) {
                                    this.$set(this.config.networkCheck, 'services', []);
                                }
                                this.config.networkCheck.services.push(response.data);
                            }
                            
                            this.$message.success('网络服务添加成功');
                            this.addNetworkServiceDialog = false;
                            this.resetNetworkServiceForm();
                            
                        }).catch(error => {
                            this.$message.error('保存网络服务配置失败');
                            console.error('新增失败:', error);
                        });
                    }
                },
                deleteNetworkService(index, groupIndex) {
                    this.$confirm('确定要删除此网络服务配置吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let deleteUrl;
                        if (groupIndex !== undefined) {
                            // 分组模式下的删除
                            deleteUrl = `/config/api/network-service/${groupIndex}/${index}`;
                        } else {
                            // 传统模式下的删除
                            deleteUrl = `/config/api/network-service/${index}`;
                        }
                        
                        request.delete(deleteUrl).then(() => {
                            if (groupIndex !== undefined) {
                                this.config.networkCheck.groups[groupIndex].services.splice(index, 1);
                            } else {
                                this.config.networkCheck.services.splice(index, 1);
                            }
                            this.$message.success('删除成功');
                            // 重新加载配置
                            this.loadConfig();
                        }).catch(error => {
                            this.$message.error('删除失败');
                            console.error(error);
                        });
                    }).catch(() => {
                        // 取消删除操作
                    });
                },
                saveJvmConfig() {
                    request.post('/config/api/middleware/jvm', this.config.middleware.jvm).then(() => {
                        this.$message.success('JVM配置保存成功');
                        // 重新加载配置
                        this.loadConfig();
                    }).catch(error => {
                        this.$message.error('保存JVM配置失败');
                        console.error(error);
                    });
                },
                saveRedisConfig() {
                    request.post('/config/api/middleware/redis', this.config.middleware.redis).then(() => {
                        this.$message.success('Redis配置保存成功');
                        // 重新加载配置
                        this.loadConfig();
                    }).catch(error => {
                        this.$message.error('保存Redis配置失败');
                        console.error(error);
                    });
                },
                saveElasticsearchConfig() {
                    request.post('/config/api/middleware/elasticsearch', this.config.middleware.elasticsearch).then(() => {
                        this.$message.success('Elasticsearch配置保存成功');
                        // 重新加载配置
                        this.loadConfig();
                    }).catch(error => {
                        this.$message.error('保存Elasticsearch配置失败');
                        console.error(error);
                    });
                },
                saveMySQLConfig() {
                    request.post('/config/api/middleware/mysql', this.config.middleware.mysql).then(() => {
                        this.$message.success('MySQL配置保存成功');
                        // 重新加载配置
                        this.loadConfig();
                    }).catch(error => {
                        this.$message.error('保存MySQL配置失败');
                        console.error(error);
                    });
                },
                saveMinIOConfig() {
                    request.post('/config/api/middleware/minio', this.config.middleware.minio).then(() => {
                        this.$message.success('MinIO配置保存成功');
                        // 重新加载配置
                        this.loadConfig();
                    }).catch(error => {
                        this.$message.error('保存MinIO配置失败');
                        console.error(error);
                    });
                },
                generateJmxParams() {
                    const params = [
                        '-Dcom.sun.management.jmxremote',
                        '-Dcom.sun.management.jmxremote.port=' + this.jmxParams.port,
                        '-Dcom.sun.management.jmxremote.authenticate=' + (this.jmxParams.authenticate ? 'true' : 'false'),
                        '-Dcom.sun.management.jmxremote.ssl=' + (this.jmxParams.ssl ? 'true' : 'false'),
                        '-Djava.rmi.server.hostname=' + this.jmxParams.hostname
                    ];
                    return params.join(' ');
                },
                generateJmxUrl() {
                    return 'service:jmx:rmi:///jndi/rmi://' + this.jmxParams.hostname + ':' + this.jmxParams.port + '/jmxrmi';
                },
                copyToClipboard(text) {
                    const input = document.createElement('input');
                    input.value = text;
                    document.body.appendChild(input);
                    input.select();
                    document.execCommand('copy');
                    document.body.removeChild(input);
                    this.$message.success('JMX启动参数已复制到剪贴板');
                },
                editNetworkGroup(group, index) {
                    this.isEditingNetworkGroup = true;
                    this.editingNetworkGroupIndex = index;
                    this.newNetworkGroup = JSON.parse(JSON.stringify(group));
                    this.addNetworkGroupDialog = true;
                },
                saveNetworkGroup() {
                    request.post('/config/api/network-group', this.newNetworkGroup).then(() => {
                        if (this.isEditingNetworkGroup) {
                            this.config.networkCheck.groups[this.editingNetworkGroupIndex] = this.newNetworkGroup;
                            this.isEditingNetworkGroup = false;
                            this.editingNetworkGroupIndex = -1;
                            this.$message.success('网络服务分组更新成功');
                        } else {
                            this.config.networkCheck.groups.push(this.newNetworkGroup);
                            this.$message.success('网络服务分组添加成功');
                        }
                        this.addNetworkGroupDialog = false;
                        this.newNetworkGroup = {
                            name: '',
                            category: 'internal',
                            description: ''
                        };
                        this.loadConfig();
                    }).catch(error => {
                        this.$message.error('保存网络服务分组失败');
                        console.error(error);
                    });
                },
                deleteNetworkGroup(index) {
                    this.$confirm('确定要删除此网络服务分组吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        request.delete(`/config/api/network-group/${index}`).then(() => {
                            this.config.networkCheck.groups.splice(index, 1);
                            this.$message.success('删除成功');
                            this.loadConfig();
                        }).catch(error => {
                            this.$message.error('删除失败');
                            console.error(error);
                        });
                    }).catch(() => {
                        // 取消删除操作
                    });
                },
                getCategoryTagType(category) {
                    switch (category) {
                        case 'internal':
                            return 'success';
                        case 'external':
                            return 'warning';
                        case 'thirdparty':
                            return 'info';
                        case 'database':
                            return 'primary';
                        case 'cache':
                            return 'danger';
                        case 'mq':
                            return 'warning';
                        case 'storage':
                            return 'info';
                        case 'monitoring':
                            return 'success';
                        case 'gateway':
                            return 'primary';
                        case 'microservice':
                            return 'info';
                        default:
                            return 'default'; // 自定义类别使用默认样式
                    }
                },
                getCategoryText(category) {
                    switch (category) {
                        case 'internal':
                            return '内网服务';
                        case 'external':
                            return '外网服务';
                        case 'thirdparty':
                            return '第三方服务';
                        case 'database':
                            return '数据库服务';
                        case 'cache':
                            return '缓存服务';
                        case 'mq':
                            return '消息队列';
                        case 'storage':
                            return '文件存储';
                        case 'monitoring':
                            return '监控服务';
                        case 'gateway':
                            return 'API网关';
                        case 'microservice':
                            return '微服务';
                        default:
                            return category || '自定义'; // 自定义类别直接显示类别名称
                    }
                },
                editLegacyNetworkService(service, index) {
                    this.isEditingNetworkService = true;
                    this.editingNetworkServiceIndex = index;
                    this.newNetworkService = JSON.parse(JSON.stringify(service));
                    this.newNetworkService.groupIndex = null; // 传统配置不属于任何分组
                    this.addNetworkServiceDialog = true;
                },
                deleteLegacyNetworkService(index) {
                    this.$confirm('确定要删除此网络服务配置吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        request.delete(`/config/api/network-service/${index}`).then(() => {
                            this.config.networkCheck.services.splice(index, 1);
                            this.$message.success('删除成功');
                            this.loadConfig();
                        }).catch(error => {
                            this.$message.error('删除失败');
                            console.error(error);
                        });
                    }).catch(() => {
                        // 取消删除操作
                    });
                },
                resetNetworkServiceForm() {
                    // 重置表单数据
                    this.newNetworkService = {
                        name: '',
                        host: '',
                        port: null,
                        type: 'HTTP',
                        connectionType: 'direct',
                        label: '',
                        groupIndex: null,
                        isDomain: false,
                        dnsTimeout: 5000,
                        description: ''
                    };
                    // 重置编辑状态
                    this.isEditingNetworkService = false;
                    this.editingNetworkServiceIndex = -1;
                    console.log('表单和编辑状态已重置');
                },
                openAddNetworkServiceDialog() {
                    this.addNetworkServiceDialog = true;
                    this.isEditingNetworkService = false;
                    this.editingNetworkServiceIndex = -1;
                    this.newNetworkService = {
                        name: '',
                        host: '',
                        port: null,
                        type: 'HTTP',
                        connectionType: 'direct',
                        label: '',
                        groupIndex: null,
                        isDomain: false,
                        dnsTimeout: 5000,
                        description: ''
                    };
                }
            }
        });
    </script>
    
    <style>
        .container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        h1 {
            margin-bottom: 20px;
            font-size: 24px;
        }
        .el-form-item-desc {
            font-size: 12px;
            color: #909399;
            line-height: 1.4;
            margin-top: 4px;
        }
        .mt-20 {
            margin-top: 20px;
        }
    </style>
</body>
</html> 